<template>
  <div class="resource-container">
    <div v-show="resourceList.length===0">
      未找到教案元素材
    </div>
    <div v-for="item in resourceList" :key="item.id" class="flex">
      <div class="resource-info">
        <div class="left-side flex">
          <div class="top">
            <div class="qustionType">类型：</div>
            <div class="qustionTypeContent">{{ item.type===20?"图片":item.module }}</div>
          </div>
          <div v-if="item.type===20" class="middle">
            <img :src="imgSrc+item.content" style="width:250px" >
          </div>
          <div v-else class="middle">
            {{ item.content }}
          </div>
          <div class="bottom">
            <div class="time">
              <div class="updateTime">更新时间：</div>
              <div class="updateTimeContent">{{ item.createTime.split("T")[0] }}</div>
            </div>
            <div class="heading">
              <div v-if="item.type===20" class="title">图片来源：</div>
              <div v-else class="title"> 教案标题：</div>
              <div class="titleContent">{{ item.type===20?item.instructionName:item.title }}</div>
            </div>

          </div>
        </div>
        <div class="right-side flex">
          <add-to-package-button
            :resourceType="'lGoal'"
            :l-goal="item.id.toString()"
          ></add-to-package-button>
        </div>
      </div>
    </div>
    <div v-if="pages > 1" class="pages">
      <el-pagination
        :page-count="pages"
        :current-page="pageNum"
        layout="prev, pager, next"
        @current-change="changePage"
      ></el-pagination>
    </div>
</div></template>

<script>
import AddToPackageButton from '@/components/Buttons/AddToPackageButton.vue'
import { imgSrc } from '@/config/minio'
export default {
  components: { AddToPackageButton },
  props: {
    scliceResourceFromDB: Object
  },
  data() {
    return {
      resourceList: [],
      // 当前页数
      pageNum: null,
      // 总页数
      pages: null,
      imgSrc: imgSrc
    }
  },
  watch: {
    scliceResourceFromDB() {
      this.resourceList = this.scliceResourceFromDB.data.instructionPlanClips
      this.pageNum = this.scliceResourceFromDB.data.pageNum
      this.pages = this.scliceResourceFromDB.data.pages
    }
  },
  methods: {
    changePage(newPage) {
      this.pageNum = newPage
      this.$emit('getSlicesShow', newPage)
    }
  }

}
</script>

<style scoped>

.resource-info {
  /*height: 190px;*/
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #dcdfe6;
  padding-top: 1rem;
  margin-bottom: 0.2rem;
  width: 100%;
}
.resource-info .left-side{
  padding-left: 2px;
  display: flex;
  flex-direction: column;
  margin-bottom: 0.5rem;

}
.resource-info .right-side{
  padding-left: 20px;
  padding-top: 5px;
}
.top{
  align-items: baseline;
  display: flex;
  flex-direction: row;
  margin-bottom: 1rem;
}
.middle{
  height: auto;
  min-width: 100px;
  padding-bottom: 20px;
  color: rgb(84, 84, 84);
  margin-bottom: 0.5rem;
}
.bottom{
  display: flex;
  flex-direction: row;
  margin-bottom: 0.5rem;
}
.time{
  display: flex;
  flex-direction: row;
  align-items: baseline;
}
.heading{
  margin-left: 20px;
  display: flex;
  flex-direction: row;
  align-items: baseline;
}

.qustionType{
  font-family:  'Roboto', sans-serif;
  font-size: 17px;
  font-weight: bold;
  color: rgb(0,0,0);
}
.qustionTypeContent{
  font-size: 16px;
  left: 80px;
  color: rgb(84, 84, 84);
}
.updateTime{
  min-width: 65px;
  display: inline-block;
  color: rgb(149, 149, 149);
  font-size: 13px;
}
.title{
  display: inline-block;
  color: rgb(149, 149, 149);
  font-size: 13px;
  padding-left: 20px;
  min-width: 85px;
}
.titleContent{
  display: inline-block;
  max-width: 452px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgb(149, 149, 149);
  font-size: 12px;
}
.updateTimeContent {
  min-width: 61px;
  display: inline-block;
  color: rgb(149, 149, 149);
  font-size: 12px;
}

.el-pagination {
    text-align: center;
}
</style>
